<template>
  <div>
    <basic-dialog
      :visible="show"
      title="设备选择"
      min-width="1000px"
      isShowBasicFooter
      :isShowInnerLoading="isTableLoading"
      @submit="submit"
      @close="onClose"
    >
      <div class="form-inline" style="padding: 20px 20px 0px 20px;">
        <div
          class="font-size-16 q-mb-md"
          v-if="parentWorkshop.length && isShowWorkShop"
        >
          所在车间: {{ queryParams.workShopName }}
        </div>
        <select-tooltip
          v-else
          v-model="queryParams.workShopId"
          :multiple="false"
          :options="workshopslist"
          @input="onChangeWork"
          msg="所在车间"
        />
      </div>
      <div class="page-content">
        <q-table
          :data="tableData"
          :columns="columns"
          row-key="id"
          class="myTable scroll stick-to-top inherit"
          :pagination.sync="pagination"
          style="max-height: 400px"
          selection="multiple"
          :selected.sync="selected"
          no-data-label="暂无数据"
          :hide-bottom="tableData.length > 0"
          color="primary"
        >
          <template v-slot:no-data>
            <div
              class="full-width row flex-center font-size-14"
              style="color: #999"
            >
              暂无数据
            </div>
          </template>
        </q-table>
      </div>
    </basic-dialog>
    <!-- 设备选择 -->
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import _ from 'lodash'
export default {
  name: 'device-select-dialog',
  props: {
    show: Boolean,
    isShowWorkShop: {
      default: true,
      type: Boolean
    },
    parentWorkshop: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {},
  data () {
    return {
      queryParams: {
        workShopId: '',
        workShopName: ''
      },
      isTableLoading: false,
      selected: [],
      workshopslist: [],
      tableData: [],
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        {
          name: 'assetNumber',
          label: '设备编号',
          align: 'left',
          field: 'assetNumber'
        },
        { name: 'name', label: '设备名称', align: 'left', field: 'name' },
        {
          name: 'deviceTypeName',
          label: '设备类型',
          align: 'left',
          field: 'deviceTypeName'
        },
        { name: 'model', label: '设备型号', align: 'left', field: 'model' }
      ]
    }
  },
  mounted () {},
  watch: {
    show (newPro) {
      newPro && this.getWorkshops()
    }
  },
  methods: {
    ...mapActions({
      getWorkshopsList: 'maintenance/getWorkshopsList',
      getDeviceIdList: 'maintenance/getDeviceIdList'
    }),
    submit () {
      if (_.isEmpty(this.selected)) {
        return this.$message.warning('请选择设备')
      }
      if (this.selected.length + this.parentWorkshop.length > 200) {
        return this.$message.warning('添加设备不能超过200台')
      }
      // 不同车间的设备不让同时添加
      this.$emit(
        'onSelect',
        this.selected.map(v => {
          const item = v
          item.workShopId = this.queryParams.workShopId
          item.workShopName = this.queryParams.workShopName
          return item
        })
      )
      this.onClear()
    },
    getWorkshops () {
      // 如果已经添加设备了, 则不能切换车间
      if (this.parentWorkshop.length && this.isShowWorkShop) {
        this.queryParams.workShopId = _.get(
          this.parentWorkshop[0],
          'workShopId',
          ''
        )
        this.queryParams.workShopName = _.get(
          this.parentWorkshop[0],
          'workShopName',
          ''
        )
        this.getDeviceId(this.queryParams.workShopId)
      } else {
        this.getWorkshopsList().then(res => {
          this.workshopslist = res
          this.queryParams.workShopId = _.get(
            this.workshopslist[0],
            'value',
            ''
          )
          this.queryParams.workShopName = _.get(
            this.workshopslist[0],
            'label',
            ''
          )
        })
      }
    },
    // 切换车间
    onChangeWork (val) {
      this.selected = []
      this.tableData = []
      this.queryParams.workShopName = this.workshopslist.find(
        v => v.value === val
      ).label
      this.getDeviceId(val)
    },
    // 获取设备信息
    getDeviceId (val) {
      this.isTableLoading = true
      const params = {
        schemeLevel: val ? 2 : 0,
        schemeId: val
      }
      this.getDeviceIdList(params)
        .then(res => {
          this.tableData = !this.parentWorkshop.length
            ? res
            : _.differenceBy(res, this.parentWorkshop, 'id')
          this.isTableLoading = false
        })
        .catch(err => {
          console.log(err)
          this.isTableLoading = false
        })
    },
    onClose () {
      this.onClear()
      this.$emit('close')
    },
    // 清空历史数据
    onClear () {
      this.selected = []
      this.workshopslist = []
      this.tableData = []
      Object.assign(
        this.queryParams,
        this.$options.data.call(this).queryParams
      )
    }
  }
}
</script>

<style scoped lang="scss"></style>
